<template>
  <div style="background-color: #f3ecf1;height: auto;">
    <el-menu :default-active="1" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1">系统首页</el-menu-item>
      <el-menu-item @click="logout">退出</el-menu-item>
    </el-menu>

    <div style="margin-bottom: 20px">
      <el-carousel height="350px">
        <el-carousel-item v-for="item in data.introductionData" :key="item">
         <img :src="item.img" alt="" style="height: 600px;width: 100%">
        </el-carousel-item>
      </el-carousel>

    </div>

    <!-- 上下布局 -->
    <div style="width: 80%;margin: 20px auto">
      <div style="font-size: 18px;border-left: 7px solid #55ff00;padding-left: 5px;height: 30px;line-height: 30px;">
        旅游攻略
      </div>
      <div style="margin-top: 20px">
        <el-row :gutter="10">
          <el-col v-for="item in data.introductionData" :key="item.id" :span="6" style="margin-bottom: 5px">
            <img :src="item.img" alt="" style="width: 100%;height: 310px;border-radius: 5px">
            <div style="font-size: 18px;font-weight: bold;line-height: 30px;height: 30px">{{ item.title }}</div>
            <div style="display: flex;align-items: center;justify-content: center;margin-top:10px;gap: 10px">
              <img :src="item.userAvatar" alt="" style="width: 30px;height: 30px;border-radius: 50%">
              <div style="font-size: 15px">{{ item.username }}</div>
              <div style="color: #666">{{ item.time }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 左右布局 -->
    <div style="width: 80%;margin: 20px auto">
      <div style="font-size: 20px;border-left: 7px solid #55ff00;padding-left: 5px;height: 30px;line-height: 30px;">
        旅游攻略
      </div>
      <div v-for="item in data.introductionData" :key="item.id"
           style="display: flex; margin-top: 20px; gap: 20px; height: auto;">

        <!-- 左侧图片 -->
        <div style="flex: 1; min-width: 0;">
          <img @click="navTo('/font/introductionDetail?id='+item.id)" :src="item.img" alt="" style="width: 100%;height: 250px;display: block;border-radius: 5px;cursor: pointer">
        </div>

        <!-- 右侧内容 -->
        <div style="flex: 3; min-width: 0;">
          <div style="font-size: 20px;font-weight: bold;cursor:pointer;">{{ item.title }}</div>
          <div class="line5" style="margin-top: 10px;font-size: 15px;color: #666;line-height: 1.5;text-align: center">
            {{ item.description }}
          </div>
          <!-- 用户信息左对齐 -->
          <div style="display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 10px;">
            <img :src="item.userAvatar" alt="" style="width: 30px;height: 30px;border-radius: 50%">
            <div style="font-size: 15px">{{ item.username }}</div>
            <div style="color: #666">{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>

<!--    &lt;!&ndash; 测试区域（取消注释验证） &ndash;&gt;-->
<!--    <div style="width: 300px; background: #fff; margin: 20px auto;">-->
<!--      <div class="line5" style="line-height: 1.5;">-->
<!--        {{ "这是一段很长的内容".repeat(30) }}-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request.js";
import { ElMessage } from "element-plus";
import lun1 from "@/assets/imgs/lun1.png"
import lun2 from "@/assets/imgs/lun2.png"
import lun3 from "@/assets/imgs/lun3.png"
import lun4 from "@/assets/imgs/lun4.png"

const data = reactive({
  user: JSON.parse(localStorage.getItem('code2025_user') || "{}"),
  introductionData: [],
  carouseData: [lun1,lun2,lun3,lun4]
});

const loadIntroduction = () => {
  request.get('introduction/selectAll').then(res => {
    if (res.code === '200') {
      data.introductionData = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  });
};
loadIntroduction();


const navTo = (url) => {
  location.href = url
}

const logout = () => {
  localStorage.removeItem("code2025_user");
  location.href = '/login';
};
</script>

<style>
.line5 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  line-height: 1.5;
  max-height: calc(1.5em * 5);
}
</style>